<template>
	<view>
		<view class="">
			<navgetbar title="充值"></navgetbar>
		</view>
		<view class="head">
			<view class="flex text-[#fff]">
				<view class="">
					<u-avatar :size="46" font-size="16" bg-color="#FFB041" :text="storeName.slice(-2)"></u-avatar>
				</view>
				<view class="ml-[20rpx] flex u-flex-column justify-center">
					<view class="text-[34rpx] font-bold leading-[34rpx]">
						{{storeName}}
					</view>
					<view class="text-[28rpx] mt-[10rpx]">
						账户余额：{{balance}}元
					</view>
				</view>
			</view>
			<view class="flex mt-[20rpx] relative">
				<!-- 		<view class="white text-[#fff] text-[26rpx]">
					
				</view> -->
				<view class="text-[#F9DDC5] text-[26rpx] notivewi" :class="textmall==true?'textlineone':''">
					充值须知：{{notice.content==""?'暂无须知':notice.content}}
				</view>
				<view @click="textmall=!textmall" v-if="notice.length>20"
					class="flex bg-[#FFA85A] white text-[#FF7800] w-[90rpx] rounded-[5rpx] leading-[36rpx] wziht h-[36rpx] text-[26rpx] absolute top-[2rpx] right-0">
					<view class="mr-[2rpx]">
						{{textmall==true?"展开":"收起"}}
					</view>
					<u-icon v-if="textmall" name="arrow-down" size="26rpx" color="#FF7800"></u-icon>
					<u-icon v-else name="arrow-up" size="26rpx" color="#FF7800"></u-icon>
				</view>
			</view>
			<view class="bg-[#fff] rounded-[20rpx] mt-[30rpx] pb-[40rpx]">
				<view class="pt-[20rpx] tabs">
					<view class="haeder">
						<view class="flex flex-1 justify-center" @click="changs(index)"
							v-for="(item,index) in tabIndex.list">
							<view>
								<view class="text" :class="tabsSelect == index ? '.text1' : ''">
									{{item.name}}
								</view>
								<view class="line1" :class="tabsSelect == index ? '.line' : ''">
								</view>
							</view>

						</view>
					</view>
				</view>
				<view class="oneboder">

				</view>
				<view class="" v-if="tabsSelect==1">
					<view class="mt-[20rpx]">
						<view class="inputtmoney flex center mx-[20rpx]">
							￥<input v-model="forms.num" placeholder="请输入金额进行充值" placeholder-class="inputho"
								class="inputclass" />
						</view>
						<view class="moneywarp">
							<view class="moneys" v-for="(item,index) in  moneylist" :key="index"
								@click="forms.num=item">
								{{item}}元
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="tabsSelect==0">
					<!-- <image src="../../../static/homeimg/login.png" mode=""></image> -->
					<view class="pb-[60rpx]">
						<view class="w-[100%] junzho mt-[62rpx]">
							<image class="w-[277rpx] h-[233rpx]" src="@/static/homeimg/datanull.png" mode="aspectFit">
							</image>
						</view>
						<view class="text-center text-[26rpx]">暂无充值活动</view>
					</view>
				</view>
			</view>
			<view v-if="tabsSelect==1" class="buttons" :class="forms.num>0?'actices':''" @click="moneyto">
				立即充值
			</view>
		</view>
	</view>
</template>

<script setup>
	import navgetbar from "@/components/navgetbar/navindex.vue"
	import {
		reactive,
		ref
	} from "vue"
	const textmall = ref(true)
	const randoms = ref(Math.floor(Math.random() * 14));
	import {
		storevluerecharge,
		withdrawalnotice,
		vipaccount
	} from "@/api/home.js"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		useStore
	} from '@/stores/user.js'
	const store = useStore();
	import {
		storeToRefs
	} from 'pinia'
	let {
		userInfo,
		doorinfo
	} = storeToRefs(store);
	const list1 = [{
		name: '充值活动',
	}, {
		name: '余额充值',
	}]
	const storeName = ref("")
	const bulisid = ref("")
	const notice = ref('')
	const balance = ref(0)
	onLoad((e) => {
		console.log(e, "商家")
		storeName.value = e.storeName
		bulisid.value = e.id
		balance.value = e.balance
		withdrawalnotice({
			shopId: e.id
		}).then(res => {
			if (res.code == 200) {
				notice.value = res.result
			}
		})
		getmonenyinfo()
	})
	//获取余额信息
	const getmonenyinfo = () => {
		vipaccount({
			shopId: bulisid.value
		}).then(res => {
			if (res.code === 200) {
				balance.value = res.result.totalCharge
			}
		})
	}
	const moneyto = () => {
		let text=/^(0|([1-9][0-9]*))(\.[\d]{1,2})?$/
		switch (false) {
			case forms.num > 0:
				return;
			 case text.test(forms.num) :
			 uni.showToast({
			 	icon:'none',
				title:"充值金额应大于0且最多两位小数"
			 })
			 return;
		}
		storevluerecharge({
			shopId: bulisid.value,
			amount: forms.num
		}).then(res => {
			console.log(res)
			if (res.code == 200) {
				let data = res.result
				uni.requestPayment({
					provider: 'wxpay', //支付类型-固定值
					timeStamp: data.timeStamp, // 时间戳（单位：秒）
					nonceStr: data.nonceStr, // 随机字符串
					package: data.package, // 固定值
					signType: data.signType, //固定值
					paySign: data.paySign, //签名
					success: function(res) {
						console.log('success:' + JSON.stringify(res));
						getmonenyinfo()
						uni.showToast({
							icon: 'none',
							title: '充值成功'
						})
					},
					fail: function(err) {
						console.log('fail:' + JSON.stringify(err));
						console.log("支付失败");
						uni.showToast({
							icon: 'none',
							title: '充值失败'
						})
					}
				});
			}
		})
	}
	let tabIndex = reactive({
		list: [{
				name: '充值活动',
				index: 0,
			},
			{
				name: '余额充值',
				index: 1,
			},
		]
	})
	const tabsSelect = ref(0)
	const changs = (e) => {
		console.log(e, "1233")
		tabsSelect.value = e
	}
	const moneylist = [50, 100, 150, 200, 250, 300]
	const forms = reactive({
		num: ""
	})
</script>

<style lang="scss">
	.tabs {
		.haeder {
			margin-top: 35rpx;
			background-color: #ffffff;
			display: flex;
		}

		.text {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #141516;

		}

		.text1 {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FE861C;
		}

		.line {

			width: 47rpx;
			height: 8rpx;
			background-color: #FE861C;
			border-radius: 8rpx 8rpx 0 0;
			margin: 0 auto;
			margin-top: 28rpx;
		}

		.line1 {
			margin-top: 28rpx;
		}
	}

	.textlineone {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.center {
		display: flex;
		// justify-content: center;
		align-items: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.head {
		width: 100%;
		height: 410rpx;
		background: #FF8213;
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		padding: 45rpx 20rpx 0 20rpx;
	}

	.white {
		white-space: nowrap;
	}

	.wziht {
		text-align: center;
		padding-left: 8rpx;
	}

	.inputtmoney {
		border-bottom: 1px dashed #F3F3F3;
	}

	.inputho {
		color: #CCCCCC;
		font-size: 36rpx;
	}

	.inputclass {
		width: 80%;
		padding: 30rpx 0;
		// background-color: #F4F4F4 !important;
		// margin-bottom: 40rpx;
		border-radius: 20rpx;
	}

	.moneywarp {
		margin-top: 30rpx;
		padding: 0 20rpx;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 20rpx;
	}

	.moneys {
		text-align: center;
		height: 82rpx;
		background: #FFF5ED;
		border-radius: 5rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF8213;
		line-height: 82rpx;
	}

	.buttons {
		position: fixed;
		bottom: 40rpx;
		width: calc(100% - 40rpx);
		left: 20rpx;
		background: #FCC08C;
		border-radius: 20rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		height: 98rpx;
		text-align: center;
		line-height: 98rpx;
	}

	.actices {
		background-color: #FF8213;
		color: #fff;
	}

	.junzho {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bodertop {
		border-top: 1px solid #efefef;
		margin: 0 20rpx;
		padding-top: 20rpx;
	}

	.notivewi {
		width: calc(100% - 100rpx);
	}

	.oneboder {
		border-bottom: 1px solid #efefef;
		transform: scaleY(.5);
		margin: 0 20rpx;
	}
</style>